<!-- 运行管理-备品备件更换记录 -->
<template>
  <div class="equip-wrap-common">
    <px-form style="padding-top: 16px" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="8">
          <px-form-item label="出库单号">
            <px-input
              v-model="queryParams.outNum"
              placeholder="请输入出库单号"
              maxlength="50"
              clearable
              @blur="queryParams.outNum = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="8">
          <px-form-item label="备件名称/编号">
            <px-input
              v-model="queryParams.spareNameOrCode"
              placeholder="请输入备件名称/编号"
              maxlength="50"
              clearable
              @blur="queryParams.spareNameOrCode = $event.target.value.trim()"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 368px)" border>
      <template v-for="(item, index) in tableColumns" :key="index">
        <px-table-column
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </template>
      <px-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getSparePartsOutByEqpId } from "@/api/equip/runManage";

const router = useRouter();

const props = defineProps(["eqpId"]);
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "usedDesc", label: "来源", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true },
    { prop: "outNum", label: "出库单号", minWidth: "140", showOverflowTooltip: true },
    { prop: "recipientName", label: "领用人", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartName", label: "名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "quantity", label: "使用数量", minWidth: "140", showOverflowTooltip: true },
    { prop: "returnQuantity", label: "退库数量", minWidth: "140", showOverflowTooltip: true },
    { prop: "updateTime", label: "最后更新时间", minWidth: "140", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0
});
const { queryParams, tableColumns, tableData, total } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});

// 查询列表
const queryTable = async () => {
  queryParams.value.eqpId = props.eqpId;
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await getSparePartsOutByEqpId(params);
  tableData.value = data?.data || [];
  total.value = data?.total || 0;
};
// 重置筛选条件列表
const resetTable = async () => {
  queryParams.value = {
    eqpId: props.eqpId,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 详情
const handleView = (row: any) => {
  router.push(`/all/equip/spareParts/outbound?id=${row.id}`);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: calc(100vh - 231px);
  padding: 0;
  overflow-x: hidden;
}
</style>
